<template>
  <div class="t-index">
    <div v-if="showHead" class="t-index-head">
      <tancire-head />
    </div>
    <div class="t-index-body">
      <router-view v-slot="{ Component, route }">
        <transition name="fade-transform" mode="out-in">
          <component :is="Component" :key="route.path"/>
        </transition>
      </router-view>
    </div>
    <div class="t-index-bottom">
    </div>
  </div>
</template>

<script setup name="Index">
import {useRoute, useRouter} from "vue-router";
import {useTcRouter} from "@/utils/routeUtils.js";
import TancireHead from "./layout/tancireHead.vue";
import useUserStore from '@/store/modules/user';
import { getToken } from '@/utils/auth';

const userStore = useUserStore();

const router = useRouter();
const route = useRoute();

const {goPage} = useTcRouter();

const {proxy} = getCurrentInstance();


const version = ref('1.0.0')
const showHead = ref(false)

const blackHead = ['Video', 'VideoRender', 'Audio', 'Home', 'Note']
const handleHeadShow = () => {
  if (blackHead.includes(route.name)) {
    showHead.value = true;
  } else {
    showHead.value = false;
  }
}

watch(() => route.name, () => {
  handleHeadShow();
})

onBeforeMount(() => {
});

onMounted(() => {
  if (getToken()) {
    userStore.getInfo();
  }
  handleHeadShow();
});

onUnmounted(() => {

});

</script>

<style scoped lang="scss">
.t-index {


}
</style>

